<!DOCTYPE html>
<html lang="en">
<head>
    {% load static %}
    <meta charset="UTF-8">
    <title>值日生</title>
    <link rel="stylesheet" href="{% static './layui/css/layui.css' %}"    media="all">
    <style>
        body{
            padding: 50px;
        }
    </style>
</head>
<body>
<table class="layui-table">
  <colgroup>
    <col width="150">
    <col width="150">
    <col>
  </colgroup>
  <thead>
    <tr>
      <th>日期选择</th>
      <th>操作</th>
      <th>值日生</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
          <input type="text" class="layui-input" id="ID-laydate-demo1" placeholder="yyyy-MM-dd">
      </td>
      <td>
          <button type="button" class="layui-btn layui-bg-blue layui-btn-xs" id="day1">随机生成值日生</button>
      </td>
      <td id="duty1"></td>
    </tr>
    <tr>
      <td>
          <input type="text" class="layui-input" id="ID-laydate-demo2" placeholder="yyyy-MM-dd">
      </td>
      <td>
          <button type="button" class="layui-btn layui-bg-blue layui-btn-xs" id="day2">随机生成值日生</button>
      </td>
      <td id="duty2"></td>
    </tr>
    <tr>
      <td>
          <input type="text" class="layui-input" id="ID-laydate-demo3" placeholder="yyyy-MM-dd">
      </td>
      <td>
          <button type="button" class="layui-btn layui-bg-blue layui-btn-xs" id="day3">随机生成值日生</button>
      </td>
      <td id="duty3"></td>
    </tr>
    <tr>
      <td>
          <input type="text" class="layui-input" id="ID-laydate-demo4" placeholder="yyyy-MM-dd">
      </td>
      <td>
          <button type="button" class="layui-btn layui-bg-blue layui-btn-xs" id="day4">随机生成值日生</button>
      </td>
      <td id="duty4"></td>
    </tr>
    <tr>
      <td>
          <input type="text" class="layui-input" id="ID-laydate-demo5" placeholder="yyyy-MM-dd">
      </td>
      <td>
          <button type="button" class="layui-btn layui-bg-blue layui-btn-xs" id="day5">随机生成值日生</button>
      </td>
      <td id="duty5"></td>
    </tr>
  </tbody>
</table>
</body>
<!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
<script src="{% static './layui/layui.js'%}"></script>
<script src="{% static './jquery/jquery-3.7.1.min.js'%}"></script>
<script>
    layui.use(function(){
          var laydate = layui.laydate;
          {% for item in item_list %}
            laydate.render({
                elem: '#ID-laydate-demo{{ item }}'
            });
          {% endfor %}
    });
</script>
<script>
    {% for item in item_list %}
        $("#day" + {{ item }}).click(function () {
            $.ajax({
            url:"{% url 'index:duty_create_api' %}",
            data:{
                'date':$("#ID-laydate-demo" + {{ item }}).val(),
            },
            type:'POST',
            success:function(result){
                console.log(result)
                if(result.code == 0){
                    $("#duty" + {{ item }}).text(result.data)
                }
            }
        });
        })
    {% endfor %}
</script>
</html>